<template>
  <van-popup
    class="betInfoPopup"
    v-model:show="props.show"
    position="bottom"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
    @click-overlay="popupClose"
    @click-close-icon="popupClose"
  >
    <van-swipe
      v-if="detail"
      class="my-swipe"
      ref="swipeRef"
      :initial-swipe="pageData.initialSwipeIdx"
      :autoplay="99999999000"
      :show-indicators="false"
      :loop="false"
      :touchable="false"
      @change="onChangeSwipe"
    >
      <!-- 选择队伍 -->
      <van-swipe-item style="height: 100%">
        <div class="box items-center" v-if="detail.teamsInfo">
          <div class="titlebg">
            <div class="titlebg-text">{{ $t("lotteryMoney.xzdw") }}</div>
            <img
              class="titlebg-close"
              @click="popupClose"
              src="/image/close-dark0-icon.svg"
            />
          </div>
          <div class="content" style="position: relative; top: -5px">
            <!-- 选择队伍介绍 -->
            <div class="content-selectteam items-center">
              <div class="content-selectteam-title">
                {{ $t("lotteryMoney.qxznyjrddw") }}
              </div>
              <div class="content-selectteam-desc">
                {{ $t("lotteryMoney.xzdwgfjj").split("xxx")[0] }}
                <span style="color: #007bff">{{
                  detail.teamPrizeRate * 100
                }}</span>
                {{ $t("lotteryMoney.xzdwgfjj").split("xxx")[1] }}
              </div>
            </div>
            <div class="content-team items-center">
              <div
                class="content-team-item"
                v-for="(item, index) in detail.teamsInfo"
                :key="index"
                @click="selectTeamsFn(item)"
              >
                <!-- 卡片内容 -->
                <div
                  class="content-team-item-top"
                  :class="{
                    'content-team-item-jh-red':
                      pageData.selectTeams &&
                      pageData.selectTeams.teamConfigId == item.teamConfigId &&
                      item.teamConfigId == 1,
                    'content-team-item-jh-yellow':
                      pageData.selectTeams &&
                      pageData.selectTeams.teamConfigId == item.teamConfigId &&
                      item.teamConfigId == 2,
                    'content-team-item-jh-blue':
                      pageData.selectTeams &&
                      pageData.selectTeams.teamConfigId == item.teamConfigId &&
                      item.teamConfigId == 3,
                    'content-team-item-bgcolor-red': item.teamConfigId == 1,
                    'content-team-item-bgcolor-yellow': item.teamConfigId == 2,
                    'content-team-item-bgcolor-blue': item.teamConfigId == 3,
                  }"
                >
                  <div
                    class="content-team-item-box items-center"
                    :class="{
                      'content-team-item-box-red': item.teamConfigId == 1,
                      'content-team-item-box-yellow': item.teamConfigId == 2,
                      'content-team-item-box-blue': item.teamConfigId == 3,
                    }"
                  >
                    <div class="content-team-item-nums items-center">
                      <img
                        class="content-team-item-nums-icon"
                        :src="item.rwicon"
                      />
                      <div
                        class="content-team-item-nums-value"
                        :class="{
                          'content-team-item-nums-value-red':
                            item.teamConfigId == 1,
                          'content-team-item-nums-value-yellow':
                            item.teamConfigId == 2,
                          'content-team-item-nums-value-blue':
                            item.teamConfigId == 3,
                        }"
                      >
                        {{ item.teamUserCount }}
                      </div>
                    </div>
                    <div
                      class="content-team-item-name"
                      :class="{
                        'content-team-item-name-selectColor-red':
                          item.teamConfigId == 1 &&
                          pageData.selectTeams &&
                          pageData.selectTeams.teamConfigId == 1,
                        'content-team-item-name-selectColor-yellow':
                          item.teamConfigId == 2 &&
                          pageData.selectTeams &&
                          pageData.selectTeams.teamConfigId == 2,
                        'content-team-item-name-selectColor-blue':
                          item.teamConfigId == 3 &&
                          pageData.selectTeams &&
                          pageData.selectTeams.teamConfigId == 3,
                        'content-team-item-name-normal-red':
                          item.teamConfigId == 1 &&
                          (!pageData.selectTeams ||
                            (pageData.selectTeams &&
                              pageData.selectTeams.teamConfigId != 1)),
                        'content-team-item-name-normal-yellow':
                          item.teamConfigId == 2 &&
                          (!pageData.selectTeams ||
                            (pageData.selectTeams &&
                              pageData.selectTeams.teamConfigId != 2)),
                        'content-team-item-name-normal-blue':
                          item.teamConfigId == 3 &&
                          (!pageData.selectTeams ||
                            (pageData.selectTeams &&
                              pageData.selectTeams.teamConfigId != 3)),
                        'content-team-item-name-min':
                          globalStore.$state.language == 'pt',
                      }"
                    >
                      {{ item.teamName }}
                    </div>
                    <!-- 麦穗 -->
                    <img
                      class="content-team-item-ms content-team-item-ms-left"
                      src="/image/lotterymoney/betpopup-msz1-icon.png"
                    />
                    <img
                      class="content-team-item-ms content-team-item-ms-right"
                      src="/image/lotterymoney/betpopup-msy1-icon.png"
                    />
                  </div>
                </div>
                <!-- 底部的两个角 -->
                <img
                  class="content-team-item-bottom content-team-item-bottom-left"
                  :src="item.bottomLeftUrl"
                />
                <img
                  class="content-team-item-bottom content-team-item-bottom-right"
                  :src="item.bottomRightUrl"
                />
              </div>
            </div>
          </div>
          <div class="footer items-center">
            <div
              class="footer-btn"
              :class="{ 'footer-btn-disabled': !pageData.selectTeams }"
              @click="confirm(1)"
            >
              {{ $t("common.confirm") }}
            </div>
          </div>
        </div>
      </van-swipe-item>
      <!-- 免费下注 -->
      <van-swipe-item>
        <div class="box items-center" style="justify-content: space-between">
          <div class="titlebg">
            <div class="titlebg-text">
              {{ $t("lotteryMoney.desc_title1_text11") }}
            </div>
            <img
              class="titlebg-close"
              @click="popupClose"
              src="/image/close-dark0-icon.svg"
            />
          </div>
          <div class="content">
            <!-- 当前下注数量/剩余数量 -->
            <div class="content-betNums">
              <div
                class="content-betNums-item content-betNums-item-bm items-center"
              >
                <img
                  class="content-betNums-item-icon"
                  src="/image/title-blue-icon.svg"
                />
                <div class="content-betNums-item-text">
                  {{ $t("lotteryMoney.bqyxzcs") }}
                </div>
                <div class="content-betNums-item-value">
                  {{
                    props.detail.sessionDrawCount +
                    (props.detail.sessionFreeDrawCount || 0)
                  }}
                </div>
              </div>

              <div class="content-betNums-item items-center">
                <img
                  class="content-betNums-item-icon"
                  src="/image/title-blue-icon.svg"
                />
                <div class="content-betNums-item-text">
                  {{ $t("lotteryMoney.syxzs") }}
                </div>
                <div class="content-betNums-item-value">
                  {{
                    Number(props.detail.maxSessionDrawCount) -
                    Number(props.detail.sessionDrawCount)
                  }}
                </div>
              </div>
            </div>
            <!-- 免费下注 -->
            <div class="content-bet">
              <!-- 免费次数 -->
              <div class="content-bet-top items-center">
                <img
                  class="content-bet-top-icon"
                  src="/image/lotterymoney/free-cs-icon.svg"
                />
                <div class="content-bet-top-title">
                  {{ $t("lotteryMoney.mfcs") }}
                </div>
                <div class="content-bet-top-value">
                  {{ detail.freeDrawCount }}
                </div>
              </div>
              <!-- 次数不足 -->
              <div
                v-if="isFreeNumsNotEnough"
                class="content-bet-top-error items-center"
              >
                <img
                  class="content-bet-top-icon"
                  src="/image/lotterymoney/free-error-icon.svg"
                />
                <div class="content-bet-top-error-title">
                  {{ $t("lotteryMoney.mfcsbz") }}
                </div>
              </div>
              <!-- 批量下注 -->
              <div class="content-bet-betBtn items-center">
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 1,
                  }"
                  @click.stop="bulkBetClik(1, 1)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 1,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "1") }}
                  </div>
                  <img
                    v-if="selectBets == 1"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 5,
                  }"
                  @click.stop="bulkBetClik(5, 1)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 5,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "5") }}
                  </div>
                  <img
                    v-if="selectBets == 5"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 10,
                  }"
                  @click.stop="bulkBetClik(10, 1)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 10,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "10") }}
                  </div>
                  <img
                    v-if="selectBets == 10"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
              </div>
            </div>
            <!-- 注意事项 -->
            <div class="content-betBottom">
              <div class="content-betBottom-text">
                {{
                  $t("lotteryMoney.mfxzdesc")
                    .replace("xx", detail.maxSessionDrawCount)
                    .replace("xxx", detail.maxSessionDrawCount)
                }}
              </div>
            </div>
          </div>
          <div class="footer items-center">
            <div
              class="footer-btn"
              :class="{ 'footer-btn-disabled': btnDisabled }"
              @click="confirm(2)"
            >
              {{ $t("lotteryMoney.ljxz") }}
            </div>
          </div>
        </div>
      </van-swipe-item>
      <!-- BDC下注 -->
      <van-swipe-item>
        <div class="box items-center" style="justify-content: space-between">
          <div class="titlebg">
            <div class="titlebg-text">
              {{ $t("lotteryMoney.desc_title1_text11") }}
            </div>
            <img
              class="titlebg-close"
              @click="popupClose"
              src="/image/close-dark0-icon.svg"
            />
          </div>
          <div class="content">
            <!-- 当前下注数量/剩余数量 -->
            <div class="content-betNums">
              <div
                class="content-betNums-item content-betNums-item-bm items-center"
              >
                <img
                  class="content-betNums-item-icon"
                  src="/image/title-blue-icon.svg"
                />
                <div class="content-betNums-item-text">
                  {{ $t("lotteryMoney.bqyxzcs") }}
                </div>
                <div class="content-betNums-item-value">
                  {{
                    props.detail.sessionDrawCount +
                    (props.detail.sessionFreeDrawCount || 0)
                  }}
                </div>
              </div>

              <div class="content-betNums-item items-center">
                <img
                  class="content-betNums-item-icon"
                  src="/image/title-blue-icon.svg"
                />
                <div class="content-betNums-item-text">
                  {{ $t("lotteryMoney.syxzs") }}
                </div>
                <div class="content-betNums-item-value">
                  {{
                    Number(props.detail.maxSessionDrawCount) -
                    Number(props.detail.sessionDrawCount)
                  }}
                </div>
              </div>
            </div>
            <!-- bdc 价格/以及 bdc余额 -->
            <div class="content-bet">
              <!-- BDC 可用余额 -->
              <div class="content-bet-top items-center">
                <img class="content-bet-top-icon" src="/image/bdc.svg" />
                <div class="content-bet-top-title">
                  {{ $t("pledge.kyye") }}
                </div>
                <div class="content-bet-top-value">
                  {{ toThousands(decimalToLength(pageData.freeAmount)) }}
                </div>
              </div>
              <!-- 余额不足 -->
              <div
                v-if="isBDCNotEnough"
                class="content-bet-top-error items-center"
              >
                <img
                  class="content-bet-top-icon"
                  src="/image/lotterymoney/free-error-icon.svg"
                />
                <div class="content-bet-top-error-title">
                  {{ $t("lottery.yebz") }}
                </div>
              </div>
              <!-- 批量下注 -->
              <div class="content-bet-betBtn items-center">
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 1,
                  }"
                  @click.stop="bulkBetClik(1, 2)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 1,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "1") }}
                  </div>
                  <img
                    v-if="selectBets == 1"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 5,
                  }"
                  @click.stop="bulkBetClik(5, 2)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 5,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "5") }}
                  </div>
                  <img
                    v-if="selectBets == 5"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
                <div
                  class="content-bet-betBtn-item"
                  :class="{
                    'content-bet-betBtn-item-activity': selectBets == 10,
                  }"
                  @click.stop="bulkBetClik(10, 2)"
                >
                  <div
                    class="content-bet-betBtn-item-text"
                    :class="{
                      'content-bet-betBtn-item-text-activity': selectBets == 10,
                    }"
                  >
                    {{ $t("lotteryMoney.xxzs").replace("xx", "10") }}
                  </div>
                  <img
                    v-if="selectBets == 10"
                    class="content-bet-betBtn-item-icon"
                    src="/image/lotterymoney/free-zsxz-icon.svg"
                  />
                </div>
              </div>
            </div>
            <!-- 注意事项 -->
            <div class="content-betBottom">
              <div class="content-betBottom-text">
                {{
                  $t("lotteryMoney.xzcssx").replace(
                    "xx",
                    detail.maxSessionDrawCount
                  )
                }}
              </div>
              <div class="content-betBottom-text">
                {{ $t("lotteryMoney.xzcshq") }}
              </div>
            </div>
            <!-- 邀请好友 -->
            <div
              v-if="isInviteFriends"
              class="inviteFriends items-center"
              @click="jumpPage('inviteFriendsMonery')"
            >
              <div class="inviteFriends-left items-center">
                <img
                  class="inviteFriends-left-img"
                  src="/image/lotterymoney/inviteFriends-rightlogo-icon.svg"
                />
                <div class="inviteFriends-left-info">
                  <div class="inviteFriends-left-info-title">
                    {{ $t("inviteFriends.yqhylcj") }}
                  </div>
                  <div class="inviteFriends-left-info-desc">
                    {{ $t("inviteFriends.maxjj").split("60000")[0] }}
                    <span style="color: #f29301; font-weight: 560">35,000</span>
                    BDC
                  </div>
                </div>
              </div>
              <div class="inviteFriends-right">
                {{ $t("inviteFriends.qyq") }}
              </div>
            </div>
          </div>
          <div class="footer items-center">
            <div
              class="footer-btn"
              :class="{ 'footer-btn-disabled': btnDisabled }"
              @click="confirm(3)"
            >
              {{ $t("lotteryMoney.ljxz") }}
            </div>
          </div>
        </div>
      </van-swipe-item>
      <!-- 美金兑换 BDC 下注 -->
      <van-swipe-item>
        <div class="box items-center">
          <div class="titlebg">
            <div class="titlebg-text">
              {{ $t("lotteryMoney.desc_title1_text11") }}
            </div>
            <img
              class="titlebg-close"
              @click="popupClose"
              src="/image/close-dark0-icon.svg"
            />
          </div>
          <div class="content">
            <!-- 描述 -->
            <div
              v-if="!detail.isSunMoneyBet"
              class="content-money-top items-center"
            >
              <img class="content-money-top-icon" src="/image/gth.svg" />
              <div class="content-money-top-title">
                {{ $t("lotteryMoney.bdczhyebz") }}
              </div>
            </div>
            <!-- 下注金额 -->
            <div class="content-money-center">
              <!-- 避险账户余额 -->
              <div class="content-money-center-top items-center">
                <div class="content-money-center-top-title">
                  {{ $t("lotteryMoney.bxzhye") }}
                </div>
                <div class="content-money-center-top-value">
                  ${{ accountBXInfo }}
                </div>
              </div>
              <!-- 兑换 -->
              <div class="content-money-center-center items-center">
                <div
                  class="content-money-center-center-item content-money-center-center-item-left"
                >
                  <div class="content-money-center-center-item-value">$0.1</div>
                </div>
                <img
                  class="content-money-center-center-jt"
                  src="/image/lotterymoney/betpopup-mjdhbdc-icon.svg"
                />
                <div
                  class="content-money-center-center-item content-money-center-center-item-right"
                >
                  <div class="content-money-center-center-item-value">
                    100 BDC
                  </div>
                </div>
              </div>
              <!-- BDC 汇率 -->
              <div class="content-money-center-bottom items-center">
                <img
                  class="content-money-center-bottom-icon"
                  src="/image/pledge/title-icon.svg"
                />
                <div class="content-money-center-bottom-text">
                  {{ $t("lotteryMoney.dhhl") }}：1BDC=${{
                    pageData.lastRecyclePrice
                  }}
                </div>
              </div>
            </div>
            <!-- 批量下注 -->
            <div class="content-bet-betBtn items-center">
              <div
                class="content-bet-betBtn-item"
                :class="{
                  'content-bet-betBtn-item-activity': selectBets == 1,
                }"
                @click.stop="bulkBetClik(1, 3)"
              >
                <div
                  class="content-bet-betBtn-item-text"
                  :class="{
                    'content-bet-betBtn-item-text-activity': selectBets == 1,
                  }"
                >
                  {{ $t("lotteryMoney.xxzs").replace("xx", "1") }}
                </div>
                <img
                  v-if="selectBets == 1"
                  class="content-bet-betBtn-item-icon"
                  src="/image/lotterymoney/free-zsxz-icon.svg"
                />
              </div>
              <div
                class="content-bet-betBtn-item"
                :class="{
                  'content-bet-betBtn-item-activity': selectBets == 5,
                }"
                @click.stop="bulkBetClik(5, 3)"
              >
                <div
                  class="content-bet-betBtn-item-text"
                  :class="{
                    'content-bet-betBtn-item-text-activity': selectBets == 5,
                  }"
                >
                  {{ $t("lotteryMoney.xxzs").replace("xx", "5") }}
                </div>
                <img
                  v-if="selectBets == 5"
                  class="content-bet-betBtn-item-icon"
                  src="/image/lotterymoney/free-zsxz-icon.svg"
                />
              </div>
              <div
                class="content-bet-betBtn-item"
                :class="{
                  'content-bet-betBtn-item-activity': selectBets == 10,
                }"
                @click.stop="bulkBetClik(10, 3)"
              >
                <div
                  class="content-bet-betBtn-item-text"
                  :class="{
                    'content-bet-betBtn-item-text-activity': selectBets == 10,
                  }"
                >
                  {{ $t("lotteryMoney.xxzs").replace("xx", "10") }}
                </div>
                <img
                  v-if="selectBets == 10"
                  class="content-bet-betBtn-item-icon"
                  src="/image/lotterymoney/free-zsxz-icon.svg"
                />
              </div>
            </div>
          </div>
          <div class="footer items-center">
            <div
              class="footer-btn"
              :class="{ 'footer-btn-disabled': btnDisabled }"
              @click="confirm(4)"
            >
              {{ $t("lotteryMoney.dhbxz") }}
            </div>
          </div>
        </div>
      </van-swipe-item>
      <!-- 余额不足 / 激活避险账户 -->
      <van-swipe-item>
        <div class="box items-center">
          <div class="titlebg">
            <div class="titlebg-text"></div>
            <img
              class="titlebg-close"
              @click="popupClose"
              src="/image/close-dark0-icon.svg"
            />
          </div>
          <div class="content items-center content-end">
            <img
              v-if="isBxzhStatus == 2"
              class="content-end-img"
              src="/image/lotterymoney/betpopup-qjh-icon.svg"
            />
            <img
              v-if="isBxzhStatus == 4 || isYebz"
              class="content-end-img"
              src="/image/lotterymoney/betpopup-qcz-icon.svg"
            />
            <div class="content-end-title">
              {{
                $t(
                  isBxzhStatus == 4 || isYebz
                    ? "lotteryMoney.bxzhyebz"
                    : "lotteryMoney.jhbxzh"
                ).split(", ")[0]
              }}
            </div>
            <div class="content-end-desc">
              {{
                $t(
                  isBxzhStatus == 4 || isYebz
                    ? "lotteryMoney.bxzhyebz"
                    : "lotteryMoney.jhbxzh"
                ).split(", ")[1]
              }}
            </div>
          </div>
          <div class="footer items-center">
            <div
              class="footer-btn"
              @click="confirm(isBxzhStatus == 4 || isYebz ? 6 : 5)"
            >
              {{
                $t(
                  isBxzhStatus == 4 || isYebz
                    ? "lotteryMoney.qcz"
                    : "lotteryMoney.ljjh"
                )
              }}
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </van-popup>
</template>
<script setup lang="ts" name="betInfoPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import {
  lotteryBettingBatch,
  getAccountInfo,
  getLotterySimpleInfo,
} from "@/api/lottery";
import type { SwipeInstance } from "vant";
import { debounce } from "@/utils";
import * as MITO from "@zhj1214/qdjk-web";
import { useEventBus } from "@vueuse/core";
import { useLotteryMoneyStore } from "~~/store/modules/lottery-money";
import { useGlobalStore } from "~~/store/global";
import { useDateFormat } from "@vueuse/core";
import { useUserStore } from "~~/store/modules/user";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    isSun: boolean;
    detail: any;
  }>(),
  {
    show: false,
    isSun: false,
    detail: {},
  }
);

const globalStore = useGlobalStore();
const lotteryMoneyStore = useLotteryMoneyStore();
const userStore = useUserStore();
const emit = defineEmits(["update:show", "refresh"]);
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

const swipeRef = ref<SwipeInstance>();

const betSuccess = useEventBus("lottery-money-bet-Success");
// 页面属性
const pageData = reactive({
  initialSwipeIdx: 0, // 当前激活的是-第几步骤
  selectTeams: null,
  freeAmount: 0, // 可用余额 BDC
  accountStatus: 0, // != 1 代表账户异常(冻结)
  lastRecyclePrice: 0.001,
});

// 进入第几步骤
const theFirstStep = (newVal: any) => {
  console.log("newVal--", newVal);

  // 无资格, 本周累计下注数量,小于周日要求的数量
  if (newVal.isSunMoneyBet) {
    // 邀请的好友已注册
    if (newVal.registerInviteUserCount && newVal.registerInviteUserCount >= 1) {
      // 是否有免费次数
      if (newVal.freeDrawCount && newVal.freeDrawCount >= 1) {
        return 1; // 免费下注
      }
      // bdc 下注
      else {
        return 2;
      }
    }
    // 美金下注
    else {
      return 3;
    }
  }
  // 有资格
  else {
    // 是否有免费次数
    if (newVal.freeDrawCount && newVal.freeDrawCount >= 1) {
      return 1; // 免费下注
    }
    // bdc 下注
    else {
      return 2;
    }
  }
};
// 队伍 Id
const serverTeamId = computed(() => {
  if (props.detail.serverTeamId) {
    return props.detail.serverTeamId;
  } else if (pageData.selectTeams && pageData.selectTeams.teamConfigId) {
    return pageData.selectTeams.teamConfigId;
  }
  return false;
});

// 避险账户-状态是否正常: 0: 未获取到避险账户信息 1. 正常 2.没有激活(开通) 3.避险账户未启用(异常) 4. 余额不足
const isBxzhStatus = ref(-1); // 状态初始值
const isYebz = ref(false); // 批量下注的,余额不足

/**
 * @description: 下注接口
 */
const lotteryBettingRequest = async () => {
  if (!serverTeamId.value) {
    showToast({
      message: t("lotteryMoney.qxxzdw"),
      "z-index": 9999999,
    });
    swipeRef.value?.prev();
    return;
  }

  // 1. 使用 loading 遮罩
  showLoadingToast({
    message: `${t("common.requestIng")}...`,
    forbidClick: true,
    duration: 15000,
    zIndex: 999999999,
  });

  try {
    const costTypeValue = costType.value || 1; // 下注花费类型 1:BDC 2:美元 3:免费抽奖
    const res = await lotteryBettingBatch({
      teamConfigId: serverTeamId.value, // 队伍 id
      exchangeBalanceAmount: costType.value == 2 ? "0.1" : undefined, // 充值场景-才需要传
      costAmount: "100" || props.detail.costAmount, // 09.30 V2.6.0 写死 100
      drawCount: selectBets.value || 1, // 批量下注次数
      costType: costTypeValue, // 下注花费类型 1:BDC 2:美元 3:免费抽奖
    });

    // console.log("--res--", res);
    // 1. 无论是否成功过,都更新 BDC 余额,避免超时情况
    costType.value = 1; // 重置
    // 获取避险账户余额
    if (costTypeValue == 2) {
      getAccountInfoRequest();
    }
    getUserAccountRequest();

    // 1.1 下注成功以后,下次进入,如何显示
    // const n = theFirstStep({
    //   isSunMoneyBet: props.detail.isSunMoneyBet,
    //   registerInviteUserCount: props.detail.registerInviteUserCount,
    //   freeDrawCount: res.freeDrawCount,
    // });
    // console.log("调用下注接口,下次进入:", n);
    // pageData.initialSwipeIdx = n;
    // swipeRef.value && swipeRef.value?.swipeTo(n);

    // 2. 后端提示
    if (res == 1204) {
      popupClose();
      MITO.log({
        message: "下注失败:1204",
        tag: "手动上报",
        level: "low",
        ex: "手动上报",
      });
      emit("refresh", { type: 9 });
    }
    // 3. 下注成功
    else if (res) {
      // 通知刷新下注列表
      setTimeout(() => {
        betSuccess.emit();
      }, 200);
      // 回调
      emit("refresh", {
        type: 1,
        costType: costTypeValue, // 下注花费类型 1:BDC 2:美元 3:免费抽奖
        freeDrawCount: res.freeDrawCount,
        sessionFreeDrawCount: res.sessionFreeDrawCount,
        successCount: res.successCount,
      });
      // 如果 pageData.initialSwipeIdx 不存在,先随便给一个值,避免popupClose方法中赋值 0 的场景发生
      if (!pageData.initialSwipeIdx) {
        if (costTypeValue == 1 || costTypeValue == 2) {
          pageData.initialSwipeIdx = 2;
        } else {
          pageData.initialSwipeIdx = 1;
        }
      }
      popupClose();
    }
    // 4. 下注失败
    else {
      popupClose();
      emit("refresh", { type: 2 });
      MITO.log({
        message: "下注失败: res 不存在",
        tag: "手动上报",
        level: "low",
        ex: "手动上报",
      });
    }
  } catch (error) {
    // 只要下注以后,都直接进入下注页面
    popupClose();
    emit("refresh", { type: 2 });
  }
};

// 获取避险账户余额
const accountBXInfo = ref(0);

const getAccountInfoRequest = async () => {
  const res = await getAccountInfo();
  console.log("--避险账户:", res);
  if (res) {
    /**************** zhjdebugger ****************/
    // res.balance = 0.5;
    // res.status = 0;
    /**************** zhjdebugger ****************/
    accountBXInfo.value = Number(res.balance || 0);
    // res.status 账户状态 0 未开通、1 已开通(正常账户)
    if (res.status == 1) {
      if (res.enabled) {
        if (Number(res.balance || 0) < 0.1) {
          isBxzhStatus.value = 4;
        } else {
          isBxzhStatus.value = 1;
        }
      } else {
        isBxzhStatus.value = 3;
      }
    } else {
      isBxzhStatus.value = 2;
    }
  } else {
    if (retrys > 1) {
      retrys = retrys - 1;
      setTimeout(() => {
        getAccountInfoRequest();
      }, 1000);
    }

    MITO.log({
      message: "避险账户信息,获取失败",
      tag: "手动上报",
      level: "low",
      ex: "手动上报",
    });
  }
};

// 是否展示,邀请好友
const isInviteFriends = computed(() => {
  return (
    lotteryMoneyStore.$state.isShowInviteLottery &&
    Number(props.detail.costAmount) > Number(pageData.freeAmount) &&
    Number(accountBXInfo.value) < 0.1
  );
});
// BDC 账户信息
let retrys = 3;

const getUserAccountRequest = async () => {
  // const res = await getUserAccount();
  const res = await getLotterySimpleInfo({ sessionId: props.detail.sessionId });
  if (res) {
    /**************** zhjdebugger ****************/
    // res.freeAmount = 90;
    /**************** zhjdebugger ****************/
    pageData.freeAmount = res.freeAmount;
    userStore.$patch((state) => {
      state.freeAmount = res.freeAmount;
    });
    if (Number(res.freeAmount) < 100) isBDCNotEnough.value = true;
    pageData.accountStatus = res.accountStatus;
    // console.log("没有达到次数上限:",Number(props.detail.sessionDrawCount) < Number(props.detail.maxSessionDrawCount));
    if (
      Number(res.sessionDrawCount) < Number(props.detail.maxSessionDrawCount)
    ) {
      if (Number(pageData.freeAmount) < 100) {
        // 获取避险账户余额
        getAccountInfoRequest();
      }
    }
  } else {
    if (retrys > 1) {
      retrys = retrys - 1;
      setTimeout(() => {
        getUserAccountRequest();
      }, 1000);
    }
  }
};

// 当前轮播索引 0 选择队伍 1.免费下注 2bdc 下注 3 美金下注 4 充值/激活
const swipeIdx = ref(0);
// 统一处理下注按钮是否禁用, 默认禁用
const btnDisabled = computed(() => {
  if (swipeIdx.value == 1) {
    return isFreeNumsNotEnough.value;
  } else if (swipeIdx.value == 2) {
    if (
      Number(props.detail.sessionDrawCount) >=
      Number(props.detail.maxSessionDrawCount)
    ) {
      return true;
    }
    if (pageData.freeAmount < 100) {
      return false;
    } else {
      return isBDCNotEnough.value;
    }
  } else if (swipeIdx.value == 3) {
    if (
      Number(props.detail.sessionDrawCount) >=
      Number(props.detail.maxSessionDrawCount)
    ) {
      return true;
    }
    return false;
  }
  return true;
});

watch(
  () => props.detail,
  (newVal, oldVal) => {
    if (newVal) {
      // console.log(newVal.serverTeamId, "--watch--newVal--", newVal.teamsInfo);
      // 有队伍信息,就选择队伍
      if (newVal.teamsInfo) {
        pageData.initialSwipeIdx = 0;
        // console.log("--newVal.isSunMoneyBet--", newVal.isSunMoneyBet);
      }
      // 没有队伍信息,只有队伍 id
      else if (newVal.serverTeamId) {
        pageData.initialSwipeIdx = theFirstStep(newVal);
        swipeIdx.value = pageData.initialSwipeIdx;
        console.log("没有队伍信息,只有队伍 id,进入:", pageData.initialSwipeIdx);
      }
      // 周日美金下注: 选择完队伍,需要先获取一次.避险余额
      if (newVal.isSunMoneyBet && isBxzhStatus.value == -1) {
        getAccountInfoRequest();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  // 1. BDC 账户
  getUserAccountRequest();
  // 2. 周日美金下注: 第二次进入抽奖页面,且下过一注以后(需要先获取一次,美金余额).
  const curDay = useDateFormat(Date.now(), "YYYY-MM-DD").value;
  const zgday = localStorage.getItem(userStore.$state.sid + "-" + "lottery-isEligibleSunday-money-bet");
  if (zgday == curDay && isBxzhStatus.value == -1) {
    getAccountInfoRequest();
  }
});

// swipe 改变事件
const onChangeSwipe = (val: any) => {
  console.log("swipe 改变事件 ", val);
  if (val == 0) {
    if (!props.detail.teamsInfo) return;
  }
  swipeIdx.value = val;
};
// 关闭弹窗
const popupClose = () => {
  // console.log("--popupClose--popupClose--", pageData.initialSwipeIdx);
  // 设置下次进入的第几步骤
  if (pageData.initialSwipeIdx != 0) {
    const n = theFirstStep(props.detail);
    console.log("关闭下注弹窗,下次进入:", n);
    pageData.initialSwipeIdx = n;
    swipeRef.value && swipeRef.value?.swipeTo(n);
  } else {
    console.log("关闭下注弹窗,下次进入:", 0);
    swipeRef.value?.swipeTo(0);
  }
  emit("update:show", false);
  // 批量:余额不足; 重置状态,下次进来重新判断
  setTimeout(() => {
    isYebz.value = false;
  }, 600);
};
// 选择队伍
const selectTeamsFn = (val: any) => {
  pageData.selectTeams = val;
};

const isFreeNumsNotEnough = ref(false); // 免费次数,不足
const isBDCNotEnough = ref(false); // BDC 可用余额,不足
const selectBets = ref(1); // 选了多少注
/**
 * @description: 选择批量
 * @param {*} val 次数
 * @param {*} type 类型 1. 免费 2.bdc 3.美金
 */
const bulkBetClik = (val: number, type: number) => {
  selectBets.value = val;
  if (type == 1) {
    if (Number(props.detail.freeDrawCount) < Number(selectBets.value)) {
      isFreeNumsNotEnough.value = true;
    } else {
      isFreeNumsNotEnough.value = false;
    }
  } else if (type == 2) {
    if (
      Number(props.detail.costAmount) * selectBets.value >
      Number(pageData.freeAmount)
    ) {
      isBDCNotEnough.value = true;
    } else {
      isBDCNotEnough.value = false;
    }
  } else if (type == 3) {
    if (Number(0.1 * selectBets.value) > Number(accountBXInfo.value)) {
      if (isBxzhStatus.value == 1) {
        showToast({
          message: t("lottery.yebz"),
          "z-index": 9999999,
        });
      }
    }
  } else {
    isBDCNotEnough.value = false;
    isFreeNumsNotEnough.value = false;
  }
};

/**
 * @description: 确认
 * val 1. 选择队伍 2.免费下注 3. BDC 下注 4.美金下注  5. 6.
 * @return {*}
 * @author: zhj1214
 */
const costType = ref(1); // server后端,下注花费类型 1:BDC 2:美元 3:免费抽奖
const confirm = debounce(
  (val: any) => {
    // 加入队伍
    if (val == 1) {
      if (!pageData.selectTeams) {
        showToast({
          message: t("lotteryMoney.qxxzdw"),
          "z-index": 9999999,
        });
        return;
      }
      // 切换下一步
      const n = theFirstStep(props.detail);
      console.log("选择队伍后,进入:", n);
      swipeRef.value && swipeRef.value?.swipeTo(n);
    }
    // 免费下注
    else if (val == 2) {
      // 统计下注
      firebase?.logEvent("BDC_H5_betClick_Click");
      // 账户冻结
      if (pageData.accountStatus != 1) {
        popupClose();
        emit("refresh", { type: 4 });
        return;
      }

      // 免费次数不足
      if (Number(props.detail.freeDrawCount) < Number(selectBets.value)) {
        isFreeNumsNotEnough.value = true;
        showToast({
          message: t("lotteryMoney.mfcsbz"),
          "z-index": 9999999,
        });
        return;
      }
      //
      costType.value = 3;
      lotteryBettingRequest();
    }
    // BDC 下注
    else if (val == 3) {
      // 统计下注
      firebase?.logEvent("BDC_H5_betClick_Click");
      // 统计周日下注
      if (props.detail.periodId == props.detail.sessionId) {
        firebase?.logEvent("BDC_H5_betClick_Sat_Click");
      }
      // 账户冻结
      if (pageData.accountStatus != 1) {
        popupClose();
        emit("refresh", { type: 2 });
        return;
      }

      // 下注次数是否超过上限
      if (
        Number(props.detail.sessionDrawCount) >=
        Number(props.detail.maxSessionDrawCount)
      ) {
        // popupClose();
        emit("refresh", { type: 5 });
        return;
      }
      // BDC余额不足
      if (
        Number(props.detail.costAmount) * selectBets.value >
        Number(pageData.freeAmount)
      ) {
        //  兜底: 在获取一次,避险账户余额
        if (isBxzhStatus.value === -1) {
          getAccountInfoRequest();
        }
        showToast(t("lottery.yebz"));
        // 余额不足 100 , 切换下一步去充值
        if (swipeRef && pageData.freeAmount < 100) {
          swipeRef.value?.next();
        }
        return;
      }
      costType.value = 1;
      // 下注接口
      lotteryBettingRequest();
    }
    // 美金下注 isBxzhStatus: 0: 未获取到避险账户信息 1. 正常 2.没有激活(开通) 3.避险账户未启用(异常) 4. 余额不足
    else if (val == 4) {
      // console.log("--isBxzhStatus.value--", isBxzhStatus.value);
      firebase?.logEvent("BDC_H5_moneyBetClick_Click");
      //  兜底: 在获取一次,避险账户余额
      if (isBxzhStatus.value === -1) {
        getAccountInfoRequest();
      }

      // 下注次数是否超过上限
      if (
        Number(props.detail.sessionDrawCount) >=
        Number(props.detail.maxSessionDrawCount)
      ) {
        // popupClose();
        emit("refresh", { type: 5 });
        return;
      }
      // 避险账户接口异常,获取失败,重新进入这个页面
      if (isBxzhStatus.value == 0) {
        popupClose();
        emit("refresh", { type: 8 });
      }
      // 正常
      else if (isBxzhStatus.value == 1) {
        // 美金不足
        if (Number(0.1 * selectBets.value) > Number(accountBXInfo.value)) {
          // 余额不足
          isYebz.value = true;
          // 切换下一步,去充值或者激活
          swipeRef && swipeRef.value?.next();
        } else {
          costType.value = 2;
          lotteryBettingRequest();
        }
      }
      // 跳转激活页面
      else if (isBxzhStatus.value == 2) {
        if (swipeRef) {
          swipeRef.value?.next();
        }
      } else if (isBxzhStatus.value == 3) {
        popupClose();
        emit("refresh", { type: 6 });
      }
      // 跳转充值页面
      else if (isBxzhStatus.value == 4) {
        if (swipeRef) {
          swipeRef.value?.next();
        }
      }
    }
    // 激活避险账户
    else if (val == 5) {
      popupClose();
      emit("refresh", { type: 7 });
    }
    // 去充值
    else if (val == 6) {
      popupClose();
      emit("refresh", { type: 3 });
    }
  },
  500,
  false
);

const jumpPage = async (type: string) => {
  if (type === "inviteFriendsMonery") {
    firebase?.logEvent("BDC_H5_BetPopup_inviteFriendsMonery_Click");
    await navigateI18nTo({ path: "/invite-friends" });
  }
};
</script>
<style lang="scss" scoped>
.betInfoPopup {
  border-top-left-radius: 12 * 2px;
  border-top-right-radius: 12 * 2px;

  .box {
    height: 495 * 2px;
    padding-bottom: var(--safe-area-inset-bottom);
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    overflow: hidden;
  }
  .titlebg {
    position: relative;
    padding: 15 * 2px;

    &-text {
      width: 100vw;
      color: #141924;
      text-align: center;
      font-size: 15 * 2px;
      font-weight: 590;
    }
    &-close {
      position: absolute;
      top: 13 * 2px;
      right: 28 * 2px;
      width: 20 * 2px;
      height: 20 * 2px;
    }
  }

  .content {
    width: 100%;
    padding: 0 15 * 2px;

    &-selectteam {
      justify-content: center;
      flex-direction: column;
      margin-bottom: 20 * 2px;
      &-title {
        margin-bottom: 9 * 2px;
        color: #141924;
        font-size: 15 * 2px;
        font-weight: 590;
      }
      &-desc {
        color: #999da7;
        font-size: 14 * 2px;
        text-align: center;
      }
    }

    &-team {
      position: relative;
      justify-content: space-between;

      &-item {
        position: relative;
        &-top {
          position: relative;
          z-index: 9;
          width: 114 * 2px;
          height: 140 * 2px;
          border-radius: 8 * 2px;
          padding-bottom: 15 * 2px;
          padding-top: 9 * 2px;
        }

        &-jh-red {
          border: 3px solid #ff4040;
        }
        &-jh-yellow {
          border: 3px solid #ffa800;
        }
        &-jh-blue {
          border: 3px solid #007bff;
        }
        &-bgcolor {
          &-red {
            background: linear-gradient(180deg, #ffede0 0%, #ffd4d3 100%);
          }
          &-yellow {
            background: linear-gradient(180deg, #fff2cf 0%, #fff3d3 100%);
          }
          &-blue {
            background: linear-gradient(180deg, #e0f8ff 0%, #d3e8ff 100%);
          }
        }
        &-box {
          position: relative;
          justify-content: center;
          flex-direction: column;
          margin: 0 * 2px 6 * 2px 9 * 2px 6 * 2px;
          height: 122 * 2px;
          border-radius: 8 * 2px;
          &-red {
            border: 2px solid #ffcbcb;
          }
          &-yellow {
            border: 2px solid #ffe091;
          }
          &-blue {
            border: 2px solid #bdddff;
          }
        }
        &-nums {
          justify-content: center;
          margin-bottom: 12 * 2px;
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50.25%,
            rgba(255, 255, 255, 0) 100%
          );
          padding: 2 * 2px 0;
          width: 100%;
          &-icon {
            width: 16 * 2px;
            height: 16 * 2px;
            margin-right: 4 * 2px;
          }
          &-value {
            font-weight: 400;
            font-size: 12 * 2px;
            &-red {
              color: #e65b5b;
            }
            &-yellow {
              color: #ffa800;
            }
            &-blue {
              color: #007bff;
            }
          }

          &-jh {
            color: #00e7b5;
          }
        }

        &-name {
          white-space: nowrap;
          border-radius: 200px;
          text-align: center;
          font-weight: 590;
          font-size: 14 * 2px;
          word-break: break-word;
          width: 60 * 2px;
          height: 60 * 2px;
          line-height: 60 * 2px;
          margin-bottom: 10 * 2px;
          &-min {
            font-size: 12 * 2px;
          }
          &-normal {
            &-red {
              color: #ff4040;
              border: 2px solid #ff6060;
              background-color: transparent;
            }
            &-yellow {
              color: #ffa800;
              border: 2px solid #ffa800;
              background-color: transparent;
            }
            &-blue {
              color: #007bff;
              border: 2px solid #007bff;
              background-color: transparent;
            }
          }

          &-selectColor {
            &-red {
              color: #fff !important;
              background: linear-gradient(270deg, #f77 0%, #ff4040 100%);
            }
            &-yellow {
              color: #fff !important;
              background: linear-gradient(89deg, #ff9b01 0.47%, #fabb1d 99.53%);
            }
            &-blue {
              color: #fff !important;
              background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
            }
          }

          &-jhColor {
            &-red {
              color: #e65b5b;
            }
            &-yellow {
              color: #ffa800;
            }
            &-blue {
              color: #007bff;
            }
          }
        }

        &-ms {
          position: absolute;
          z-index: 1;
          bottom: 6 * 2px;
          height: 50 * 2px;
          &-left {
            left: 0;
          }
          &-right {
            right: 0;
          }
        }
        &-bottom {
          position: absolute;
          z-index: 1;
          bottom: -13 * 2px;
          height: 50 * 2px;
          &-left {
            left: 0;
          }
          &-right {
            right: 0;
          }
        }
      }
    }

    &-betNums {
      &-item {
        &-bm {
          margin-bottom: 9 * 2px;
        }
        &-icon {
          width: 9 * 2px;
          height: 9 * 2px;
        }
        &-text {
          margin-left: 10 * 2px;
          color: #999da7;
          font-size: 13 * 2px;
          white-space: nowrap;
        }

        &-value {
          margin-left: 4 * 2px;
          color: #007bff;
          font-size: 13 * 2px;
          white-space: nowrap;
          font-weight: 700;
        }
      }
    }

    &-bet {
      margin: 20 * 2px 0;
      &-top {
        justify-content: center;
        margin-bottom: 10 * 2px;
        &-icon {
          width: 20 * 2px;
          height: 20 * 2px;
        }
        &-title {
          margin: 0 10 * 2px;
          color: #141924;
          font-size: 15 * 2px;
          font-weight: 590;
          white-space: nowrap;
        }
        &-value {
          color: #007bff;
          font-size: 15 * 2px;
          white-space: nowrap;
          font-weight: 590;
        }
        &-error {
          justify-content: center;
          margin-bottom: 10 * 2px;
          color: #ff4040;
          font-size: 11 * 2px;
          white-space: nowrap;
        }
      }
      &-betBtn {
        justify-content: space-between;
        &-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8 * 2px;
          background: #d4e9ff;
          width: 110 * 2px;
          height: 80 * 2px;
          &-text {
            color: #002853;
            font-size: 16 * 2px;
            white-space: nowrap;
            font-weight: 590;
            &-activity {
              color: #fff;
            }
          }
          &-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 22 * 2px;
            height: 22 * 2px;
          }
          &-activity {
            background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
          }
        }
      }
    }

    &-price {
      width: 100%;
      padding: 12 * 2px 0;
      border-radius: 12 * 2px 12 * 2px 0px 0px;
      border: 0.8px solid rgba(115, 119, 128, 0.15);
      background: #d4e9ff;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 8 * 2px;
      &-inviteFriends {
        padding: 16 * 2px 0;
        background: linear-gradient(90deg, #cce5ff 0%, #ccf6ff 100%);
        margin-bottom: 20 * 2px;
      }
      &-top {
        color: #141924;
        font-size: 16 * 2px;
        font-weight: 590;
        margin-bottom: 9 * 2px;
        &-value {
          color: #007bff;
          font-size: 24 * 2px;
        }
      }
      &-bottom {
        color: #999da7;
        font-size: 12 * 2px;
      }
    }

    &-betBottom {
      border-radius: 8 * 2px;
      padding: 8 * 2px 10 * 2px;
      border: 0.8px solid #e8e8e8;
      &-text {
        color: #999da7;
        font-size: 12 * 2px;
        line-height: 16 * 2px;
      }
    }

    &-money {
      &-top {
        padding: 8 * 2px 10 * 2px;
        border: 0.7px solid #e8e8e8;

        &-icon {
          width: 22 * 2px;
          height: 22 * 2px;
          margin-right: 10 * 2px;
        }
        &-title {
          color: #999da7;
          font-size: 13 * 2px;
        }
      }
      &-center {
        margin: 20 * 2px 0;
        &-top {
          justify-content: center;
          padding: 6 * 2px 0;
          width: 100%;

          background: linear-gradient(
            90deg,
            rgba(240, 243, 250, 0) 0%,
            #f0f3fa 30.3%,
            #f0f3fa 70.35%,
            rgba(240, 243, 250, 0) 100%
          );

          &-title {
            color: #141924;
            font-size: 15 * 2px;
            font-weight: 590;
            white-space: nowrap;
            margin-right: 10 * 2px;
          }
          &-value {
            color: #007bff;
            font-size: 15 * 2px;
            font-weight: 590;
          }
        }
        &-center {
          position: relative;
          justify-content: center;
          margin: 5 * 2px 0;
          &-item {
            background: #f0f3fa;
            padding: 24 * 2px 0;
            width: 176 * 2px;

            &-left {
              border-radius: 16px 0px 0px 16px;
              margin-right: 6 * 2px;
            }

            &-right {
              border-radius: 0px 16px 16px 0px;
              margin-left: 6 * 2px;
            }
            &-value {
              // width: 100%;
              text-align: center;
              color: #141924;
              font-size: 17 * 2px;
              font-weight: 600;
            }
          }
          &-jt {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 38 * 2px;
            height: 38 * 2px;
          }
        }
        &-bottom {
          &-icon {
            width: 9 * 2px;
            height: 9 * 2px;
            margin-right: 8 * 2px;
          }
          &-text {
            color: #999da7;
            font-size: 12 * 2px;
          }
        }
      }
    }

    &-end {
      justify-content: center;
      flex-direction: column;
      &-img {
        height: 180 * 2px;
      }
      &-title {
        margin-bottom: 11 * 2px;
        color: #141924;
        font-size: 15 * 2px;
      }

      &-desc {
        color: #999da7;
        font-size: 14 * 2px;
        margin-bottom: 34 * 2px;
      }
    }
  }

  .footer {
    width: 100%;
    justify-content: center;
    padding: 11 * 2px 15 * 2px;
    &-btn {
      border-radius: 6 * 2px;
      background-color: #007bff;

      color: #fff;
      text-align: center;
      font-size: 15 * 2px;
      font-weight: 590;
      width: 100%;
      height: 48 * 2px;
      line-height: 48 * 2px;
      &-disabled {
        background-color: #a0ceff;
      }
      &-cancel {
        background-color: #fff;
        color: #007bff;
        border: 3px solid #007bff;
        margin-left: 10 * 2px;
      }
    }
  }
}

.inviteFriends {
  justify-content: space-between;
  margin-top: 10 * 2px;
  padding: 1.5 * 2px 0 * 2px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #afe7f1 15.25%,
    #d7ecff 85.39%,
    #fff 100%
  );

  &-left {
    flex: 1;
    &-img {
      width: 60 * 2px;
      height: 60 * 2px;
      margin-right: 10 * 2px;
    }
    &-info {
      flex: 1;
      &-title {
        color: #002853;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-bottom: 8 * 2px;
      }
      &-desc {
        color: #607286;
        font-size: 11 * 2px;
        font-weight: 400;
      }
    }
  }
  &-right {
    text-wrap: nowrap;
    white-space: nowrap;
    border-radius: 100px;
    background: #007bff;
    padding: 4 * 2px 10 * 2px;
    color: #fff;
    font-size: 13 * 2px;
    font-weight: 590;
    // margin-left: 8 * 2px;
  }
}
</style>
